<template>
  <div style="padding: 60px 240px; overflow-x: auto;">
    <h2 style="margin-bottom: 50px; font-weight:500; font-size: 32px">农机补贴申请</h2>
    <el-row>
      <el-col :span="8">
        <h3 style="margin-bottom: 30px; margin-left: 10px; font-weight:bold; font-size: 18px">基本信息</h3>
      </el-col>
      <el-col :span="2" :offset="10">
        <el-button size="small" style="font-weight:bold;" @click="handleInfo">身份证识别</el-button>
      </el-col>
      <el-col  :span="2">
        <el-button size="small" style="font-weight:bold;" @click="handleInfo">查看材料清单</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="15" style="padding: 0 50px 30px;">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
        <el-col :span="24" >
          <el-row :gutter="15" style="margin-bottom: 10px;">
            <el-col :span="8">
              <el-form-item label="申领人" prop="appyBy">
                <el-input v-model="formData.appyBy" placeholder="请输入姓名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="formData.sex" placeholder="请选择性别" clearable style="width: 100%">
                  <!-- 添加选项 -->
                  <el-option label="男" value="male"></el-option>
                  <el-option label="女" value="female"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="15" style="margin-bottom: 10px;">
            <el-col :span="8">
              <el-form-item label="身份证号码" prop="bankCard">
                <el-input v-model="formData.bankCard" placeholder="请输入18位身份证号码" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="15" style="margin-bottom: 10px;">
            <el-col :span="8">
              <el-form-item label="身份证地址" prop="idcardAddr">
                <el-input v-model="formData.idcardAddr" placeholder="请输入身份证地址" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="现住地址" prop="oftenAddr">
                <el-input v-model="formData.oftenAddr" placeholder="请输入现住地址" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="15" style="margin-bottom: 10px;">
            <el-col :span="8">
              <el-form-item label="机具类型" prop="machineType">
                <el-input v-model="formData.machineType" placeholder="请输入机具类型" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="机具出厂编号" prop="machineNum">
                <el-input v-model="formData.machineNum" placeholder="请输入机具出厂编号" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="15" style="margin-bottom: 10px;">
            <el-col :span="8">
              <el-form-item label="机具架子号" prop="machineRack">
                <el-input v-model="formData.machineRack" placeholder="请输入机具架子号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="发动机号" prop="machineEngine">
                <el-input v-model="formData.machineEngine" placeholder="请输入发动机号" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="15" style="margin-bottom: 10px;">
            <el-col :span="8">
              <el-form-item label="一卡通账号" prop="idCard">
                <el-input v-model="formData.idCard" placeholder="请输入一卡通账号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入联系电话" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="15" style="margin-bottom: 10px;">
            <el-col :span="18">
              <el-form-item label="备注" prop="remark">
                <el-input 
                  v-model="formData.remark" 
                  type="textarea" 
                  :autosize="{minRows: 4, maxRows: 4}"
                  placeholder="请输入备注信息">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-row>
    <el-row type="flex" align="middle">
      <el-col :span="3">
        <h3 style="margin-left: 10px; font-weight:bold; font-size: 24px">附件</h3>
      </el-col>
      <el-col  :span="2">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click=""
          v-hasPermi="['system:oss:upload']"
        >添加附件</el-button>
      </el-col>
      <el-col :span="10">
        <span style="color: rgba(190,190,190,1);font-size: 16px;font-family: AlibabaPuHui;line-height: 24px;">支持 .png .jpg .txt .rar .doc .pdf .xls .zip 等格式，单个附件不得超过512M</span>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
        <el-col :span="18" style="display: flex; justify-content: center; margin-top: 20px;">
          <!-- <el-form-item style="text-align: center; margin-top: 20px;"> -->
            <el-button type="primary" @click="submitForm" size="large" style="width: 150px; margin: 0;">提交</el-button>
            <!-- <el-button @click="resetForm" size="medium" style="margin-left: 30px;">重置</el-button> -->
          <!-- </el-form-item> -->
        </el-col>
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <div>
        <span>1.村委会介绍信</span>
        <span>1.村委会介绍信</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open=false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      formData: {
        appyBy: undefined,
        sex: undefined,
        bankCard: undefined,
        idcardAddr: undefined,
        oftenAddr: undefined,
        machineType: undefined,
        machineNum: undefined,
        machineRack: undefined,
        machineEngine: undefined,
        idCard: undefined,
        phone: undefined,
        remark: undefined,
        field123: undefined,
      },
      rules: {
        appyBy: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        sex: [{
          required: true,
          message: '请选择性别',
          trigger: 'change'
        }],
        bankCard: [{
          required: true,
          message: '请输入18位身份证号码',
          trigger: 'blur'
        }],
        idcardAddr: [{
          required: true,
          message: '请输入身份证地址',
          trigger: 'blur'
        }],
        oftenAddr: [{
          required: true,
          message: '请输入现住地址',
          trigger: 'blur'
        }],
        machineType: [{
          required: true,
          message: '请输入机具类型',
          trigger: 'blur'
        }],
        machineNum: [{
          required: true,
          message: '请输入机具出厂编号',
          trigger: 'blur'
        }],
        machineRack: [{
          required: true,
          message: '请输入机具架子号',
          trigger: 'blur'
        }],
        machineEngine: [{
          required: true,
          message: '请输入发动机号',
          trigger: 'blur'
        }],
        idCard: [{
          required: true,
          message: '请输入一卡通账号',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        }],
        remark: [{
          required: false,
          message: '请输入联系电话',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    handleInfo() {
      this.open = true;
      this.title = "添加用户";
    }
  }
}

</script>
<style>
</style>
